<template>
  <div class="min-h-screen bg-gradient-to-br from-gray-50 via-white to-blue-50 relative">

    <!-- 背景装饰 -->
    <div class="fixed inset-0 pointer-events-none">
      <div class="absolute top-20 left-20 w-96 h-96 bg-gradient-to-r from-blue-100/30 to-indigo-100/30 rounded-full filter blur-3xl animate-pulse"></div>
      <div class="absolute bottom-20 right-20 w-80 h-80 bg-gradient-to-r from-purple-100/30 to-pink-100/30 rounded-full filter blur-3xl animate-pulse delay-1000"></div>
    </div>

    <!-- 导航栏 -->
    <AppHeader 
      :show-back-button="false"
      :show-nav-menu="false"
      :show-breadcrumb="true"
      :show-location="false"
      :show-search-button="false"
      :show-notification-button="false"
      :show-decorations="false"
      logo-size="medium"
      current-page-title="收货地址"
    />

    <div class="relative z-10 py-8">
      <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- 页面标题 -->
        <div class="mb-8 animate-fade-in-up">
          <div class="bg-white/80 backdrop-blur-sm rounded-2xl p-8 border border-gray-200 shadow-lg">
            <div class="flex items-center justify-between">
              <div>
                <h1 class="text-4xl font-bold text-gray-800 mb-3 flex items-center gap-3">
                  <i class="bi bi-geo-alt-fill text-blue-600 text-3xl animate-bounce-gentle"></i>
                  收货地址管理
                </h1>
                <p class="text-gray-600 text-lg">管理您的收货地址，支持多个地址并设置默认地址</p>
              </div>
              <button 
                @click="showAddModal = true"
                class="bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500 text-white px-6 py-3 rounded-lg font-medium transition-all duration-300 transform hover:-translate-y-1 flex items-center gap-2 shadow-lg shadow-blue-500/25"
              >
                <i class="bi bi-plus-circle text-lg"></i>
                添加新地址
              </button>
            </div>
          </div>
        </div>

        <!-- 地址列表 -->
        <div v-if="loading" class="animate-fade-in-up animation-delay-200">
          <div class="bg-white/80 backdrop-blur-sm rounded-2xl p-8 border border-gray-200 shadow-lg text-center">
            <div class="loading-spinner mx-auto mb-4"></div>
            <p class="text-gray-600">正在加载地址列表...</p>
          </div>
        </div>

        <div v-else-if="addresses.length === 0" class="animate-fade-in-up animation-delay-200">
          <div class="bg-white/80 backdrop-blur-sm rounded-2xl p-16 border border-gray-200 shadow-lg text-center">
            <i class="bi bi-geo-alt text-6xl text-gray-400 mb-6"></i>
            <h3 class="text-xl font-semibold text-gray-800 mb-4">暂无收货地址</h3>
            <p class="text-gray-600 mb-8">添加您的第一个收货地址，让购物更加便捷</p>
            <button 
              @click="showAddModal = true"
              class="bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500 text-white px-8 py-3 rounded-lg font-medium transition-all duration-300 transform hover:-translate-y-1 shadow-lg shadow-blue-500/25"
            >
              <i class="bi bi-plus-circle mr-2"></i>
              添加收货地址
            </button>
          </div>
        </div>

        <div v-else class="space-y-6 animate-fade-in-up animation-delay-200">
          <div 
            v-for="address in addresses" 
            :key="address.id"
            class="bg-white/80 backdrop-blur-sm rounded-2xl p-8 border border-gray-200 shadow-lg hover:border-blue-300 transition-all duration-300 transform hover:-translate-y-1"
          >
            <div class="flex items-start justify-between">
              <div class="flex-1">
                <!-- 地址标题和默认标签 -->
                <div class="flex items-center gap-3 mb-4">
                  <h3 class="text-xl font-semibold text-gray-800">{{ address.name }}</h3>
                  <span class="text-gray-600">{{ address.phone }}</span>
                  <div 
                    v-if="address.is_default" 
                    class="default-address-badge"
                  >
                    <i class="bi bi-star-fill"></i>
                    <span>默认地址</span>
                    <div class="badge-glow"></div>
                  </div>
                </div>
                
                <!-- 详细地址 -->
                <div class="text-gray-700 leading-relaxed">
                  <p class="text-lg">{{ address.province }} {{ address.city }} {{ address.district }}</p>
                  <p class="text-gray-600 mt-1">{{ address.detail }}</p>
                  <p v-if="address.postal_code" class="text-gray-500 text-sm mt-1">邮政编码：{{ address.postal_code }}</p>
                </div>
              </div>
              
              <!-- 操作按钮 -->
              <div class="flex flex-col space-y-2 ml-6">
                <button 
                  v-if="!address.is_default"
                  @click="setDefault(address.id)"
                  :disabled="settingDefault"
                  class="btn-set-default px-4 py-2 rounded-lg text-sm font-medium transition-all duration-300 transform hover:-translate-y-1 disabled:opacity-50"
                >
                  <i class="bi bi-star mr-1"></i>
                  <span v-if="settingDefault">设置中...</span>
                  <span v-else>设为默认</span>
                  <div class="btn-shine"></div>
                </button>
                <button 
                  @click="editAddress(address)"
                  class="border border-blue-300 text-blue-600 hover:bg-blue-50 hover:border-blue-400 px-4 py-2 rounded-lg text-sm font-medium transition-all duration-300 transform hover:-translate-y-1"
                >
                  <i class="bi bi-pencil mr-1"></i>
                  编辑
                </button>
                <button 
                  @click="deleteAddress(address.id)"
                  :disabled="deleting"
                  class="border border-red-300 text-red-600 hover:bg-red-50 hover:border-red-400 px-4 py-2 rounded-lg text-sm font-medium transition-all duration-300 transform hover:-translate-y-1 disabled:opacity-50"
                >
                  <i class="bi bi-trash mr-1"></i>
                  删除
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 添加/编辑地址弹窗 -->
    <div v-if="showAddModal || showEditModal" class="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 animate-fade-in p-4">
      <div class="bg-white rounded-2xl border border-gray-200 shadow-xl animate-scale-in w-full max-w-2xl max-h-[90vh] overflow-y-auto">
        <div class="p-8">
          <h3 class="text-2xl font-bold text-gray-800 mb-6 flex items-center gap-3">
            <i class="bi bi-geo-alt text-blue-600"></i>
            {{ isEditing ? '编辑地址' : '添加新地址' }}
          </h3>
          
          <form @submit.prevent="isEditing ? updateAddress() : addAddress()" class="space-y-6">
            <!-- 收货人信息 -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div class="space-y-2">
                <label for="name" class="block text-sm font-medium text-blue-600">收货人姓名 *</label>
                <input 
                  id="name"
                  v-model="form.name" 
                  type="text" 
                  class="input-light w-full"
                  placeholder="请输入收货人姓名"
                  required
                />
              </div>
              <div class="space-y-2">
                <label for="phone" class="block text-sm font-medium text-blue-600">手机号码 *</label>
                <input 
                  id="phone"
                  v-model="form.phone" 
                  type="tel" 
                  class="input-light w-full"
                  placeholder="请输入手机号码"
                  required
                />
              </div>
            </div>

            <!-- 地区选择 -->
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
              <div class="space-y-2">
                <label for="province" class="block text-sm font-medium text-blue-600">省份 *</label>
                <select 
                  id="province"
                  v-model="form.province" 
                  class="input-light w-full"
                  required
                  @change="onProvinceChange"
                >
                  <option value="">请选择省份</option>
                  <option v-for="province in provinces" :key="province.name" :value="province.name">
                    {{ province.name }}
                  </option>
                </select>
              </div>
              <div class="space-y-2">
                <label for="city" class="block text-sm font-medium text-blue-600">城市 *</label>
                <select 
                  id="city"
                  v-model="form.city" 
                  class="input-light w-full"
                  required
                  @change="onCityChange"
                >
                  <option value="">请选择城市</option>
                  <option v-for="city in cities" :key="city.name" :value="city.name">
                    {{ city.name }}
                  </option>
                </select>
              </div>
              <div class="space-y-2">
                <label for="district" class="block text-sm font-medium text-blue-600">区县 *</label>
                <select 
                  id="district"
                  v-model="form.district" 
                  class="input-light w-full"
                  required
                >
                  <option value="">请选择区县</option>
                  <option v-for="district in districts" :key="district.name" :value="district.name">
                    {{ district.name }}
                  </option>
                </select>
              </div>
            </div>

            <!-- 详细地址 -->
            <div class="space-y-2">
              <label for="detail" class="block text-sm font-medium text-blue-600">详细地址 *</label>
              <textarea 
                id="detail"
                v-model="form.detail" 
                class="input-light w-full h-24 resize-none"
                placeholder="请输入详细地址，如街道、门牌号、楼层等"
                required
              ></textarea>
            </div>

            <!-- 邮政编码 -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div class="space-y-2">
                <label for="postal_code" class="block text-sm font-medium text-blue-600">邮政编码</label>
                <input 
                  id="postal_code"
                  v-model="form.postal_code" 
                  type="text" 
                  class="input-light w-full"
                  placeholder="请输入邮政编码（可选）"
                />
              </div>
              <div class="space-y-2 flex items-end">
                <label class="flex items-center space-x-2">
                  <input 
                    v-model="form.is_default" 
                    type="checkbox" 
                    class="w-4 h-4 text-blue-600 bg-white border-2 border-blue-500 rounded focus:ring-blue-500"
                  />
                  <span class="text-sm text-gray-700">设为默认地址</span>
                </label>
              </div>
            </div>
            
            <div class="flex justify-end space-x-4 pt-6">
              <button 
                type="button" 
                @click="closeModal" 
                class="border border-gray-300 text-gray-700 hover:bg-gray-50 hover:border-gray-400 px-6 py-3 rounded-lg font-medium transition-all duration-300 transform hover:-translate-y-1"
              >
                <i class="bi bi-x-circle mr-2"></i>
                取消
              </button>
              <button 
                type="submit" 
                :disabled="submitting"
                class="bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500 disabled:from-gray-400 disabled:to-gray-400 text-white px-6 py-3 rounded-lg font-medium transition-all duration-300 transform hover:-translate-y-1 disabled:opacity-50 disabled:cursor-not-allowed shadow-lg shadow-blue-500/25"
              >
                <span v-if="submitting" class="loading loading-spinner loading-sm mr-2"></span>
                <i v-else class="bi bi-check-circle mr-2"></i>
                {{ submitting ? '保存中...' : (isEditing ? '保存修改' : '添加地址') }}
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, computed } from 'vue'
import { addressApi } from '../utils/api/addresses'
import type { Address, AddressCreateInput, AddressUpdateInput } from '../types/api'
import { createDiscreteApi } from 'naive-ui'
import { 
  getProvinces, 
  getCitiesByProvinceName, 
  getAreasByCityName,
  validateRegion,
  type Province,
  type City,
  type Area
} from '../utils/regions'
import AppHeader from '../components/AppHeader.vue'

// 创建消息API
const { message } = createDiscreteApi(['message'])

// 消息函数
const success = (content) => {
  message.success(content, { duration: 3000 })
}

const error = (content) => {
  message.error(content, { duration: 4000 })
}

// 页面状态
const loading = ref(true)
const submitting = ref(false)
const settingDefault = ref(false)
const deleting = ref(false)
const addresses = ref<Address[]>([])

// 弹窗状态
const showAddModal = ref(false)
const showEditModal = ref(false)
const editingAddress = ref<Address | null>(null)

// 表单数据
const form = reactive<AddressCreateInput>({
  name: '',
  phone: '',
  province: '',
  city: '',
  district: '',
  detail: '',
  postal_code: '',
  is_default: false
})

// 地区数据
const provinces = ref<Province[]>([])
const cities = ref<City[]>([])
const districts = ref<Area[]>([])

// 计算属性
const isEditing = computed(() => editingAddress.value !== null)

// 初始化省份数据
const initProvinces = () => {
  try {
    provinces.value = getProvinces()
  } catch (error) {
    console.error('获取省份数据失败:', error)
    error('获取省份数据失败')
  }
}

// 获取地址列表
const fetchAddresses = async () => {
  try {
    loading.value = true
    const response = await addressApi.getAddresses()
    addresses.value = response.data || []
  } catch (error) {
    console.error('获取地址列表失败:', error)
    error('获取地址列表失败，请刷新重试')
  } finally {
    loading.value = false
  }
}

// 添加地址
const addAddress = async () => {
  try {
    // 验证省市区组合
    if (!validateRegion(form.province, form.city, form.district)) {
      error('请选择正确的省市区组合')
      return
    }
    
    submitting.value = true
    const response = await addressApi.createAddress(form)
    if (response.success && response.data) {
      // 如果新地址是默认地址，需要更新其他地址的默认状态
      if (response.data.is_default) {
        addresses.value.forEach(addr => {
          addr.is_default = false
        })
      }
      
      addresses.value.push(response.data)
      closeModal()
      success('地址添加成功')
    }
  } catch (error: any) {
    console.error('添加地址失败:', error)
    error(error.message || '添加地址失败，请重试')
  } finally {
    submitting.value = false
  }
}

// 编辑地址
const editAddress = (address: Address) => {
  editingAddress.value = address
  form.name = address.name
  form.phone = address.phone
  form.province = address.province
  form.city = address.city
  form.district = address.district
  form.detail = address.detail
  form.postal_code = address.postal_code || ''
  form.is_default = address.is_default
  
  // 触发级联选择
  onProvinceChange()
  onCityChange()
  
  showEditModal.value = true
}

// 更新地址
const updateAddress = async () => {
  if (!editingAddress.value) return
  
  try {
    // 验证省市区组合
    if (!validateRegion(form.province, form.city, form.district)) {
      error('请选择正确的省市区组合')
      return
    }
    
    submitting.value = true
    const response = await addressApi.updateAddress(editingAddress.value.id, form)
    if (response.success && response.data) {
      // 如果更新的地址被设为默认地址，需要更新其他地址的默认状态
      if (response.data.is_default) {
        addresses.value.forEach(addr => {
          if (addr.id !== response.data!.id) {
            addr.is_default = false
          }
        })
      }
      
      const index = addresses.value.findIndex(addr => addr.id === editingAddress.value!.id)
      if (index !== -1) {
        addresses.value[index] = response.data
      }
      closeModal()
      success('地址更新成功')
    }
  } catch (error: any) {
    console.error('更新地址失败:', error)
    error(error.message || '更新地址失败，请重试')
  } finally {
    submitting.value = false
  }
}

// 设置默认地址
const setDefault = async (id: number) => {
  try {
    settingDefault.value = true
    const response = await addressApi.setDefaultAddress(id)
    if (response.success) {
      // 更新本地状态
      addresses.value.forEach(addr => {
        addr.is_default = addr.id === id
      })
      success('默认地址设置成功')
    }
  } catch (error: any) {
    console.error('设置默认地址失败:', error)
    error(error.message || '设置默认地址失败，请重试')
  } finally {
    settingDefault.value = false
  }
}

// 删除地址
const deleteAddress = async (id: number) => {
  if (!confirm('确定要删除这个地址吗？')) return
  
  try {
    deleting.value = true
    const response = await addressApi.deleteAddress(id)
    if (response.success) {
      addresses.value = addresses.value.filter(addr => addr.id !== id)
      success('地址删除成功')
    }
  } catch (error: any) {
    console.error('删除地址失败:', error)
    error(error.message || '删除地址失败，请重试')
  } finally {
    deleting.value = false
  }
}

// 关闭弹窗
const closeModal = () => {
  showAddModal.value = false
  showEditModal.value = false
  editingAddress.value = null
  
  // 重置表单
  form.name = ''
  form.phone = ''
  form.province = ''
  form.city = ''
  form.district = ''
  form.detail = ''
  form.postal_code = ''
  form.is_default = false
  
  // 重置地区数据
  cities.value = []
  districts.value = []
}

// 省份变化时获取城市
const onProvinceChange = () => {
  form.city = ''
  form.district = ''
  cities.value = []
  districts.value = []
  
  if (form.province) {
    try {
      cities.value = getCitiesByProvinceName(form.province)
    } catch (error) {
      console.error('获取城市数据失败:', error)
      error('获取城市数据失败')
    }
  }
}

// 城市变化时获取区县
const onCityChange = () => {
  form.district = ''
  districts.value = []
  
  if (form.province && form.city) {
    try {
      districts.value = getAreasByCityName(form.province, form.city)
    } catch (error) {
      console.error('获取区县数据失败:', error)
      error('获取区县数据失败')
    }
  }
}

// 页面挂载时获取数据
onMounted(() => {
  fetchAddresses()
  initProvinces()
})
</script>

<style scoped>
/* 浅色主题输入框样式 */
.input-light {
  background: white;
  border: 2px solid rgba(209, 213, 219, 0.8);
  color: #374151;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  transition: all 0.3s ease;
}

.input-light:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.input-light::placeholder {
  color: #9ca3af;
}

.input-light option {
  background: white;
  color: #374151;
}

/* 默认地址徽章样式 */
.default-address-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 50%, #7c3aed 100%);
  color: white;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 9999px;
  box-shadow: 
    0 4px 15px rgba(59, 130, 246, 0.4),
    0 0 30px rgba(59, 130, 246, 0.3);
  overflow: hidden;
  animation: badge-pulse 2s ease-in-out infinite alternate;
}

.default-address-badge i {
  animation: star-twinkle 1.5s ease-in-out infinite;
}

.badge-glow {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  animation: badge-shine 3s ease-in-out infinite;
}

/* 设为默认按钮样式 */
.btn-set-default {
  position: relative;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 50%, #b45309 100%);
  color: white;
  border: 2px solid rgba(245, 158, 11, 0.3);
  box-shadow: 
    0 4px 15px rgba(245, 158, 11, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  overflow: hidden;
}

.btn-set-default:hover {
  box-shadow: 
    0 6px 20px rgba(245, 158, 11, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  border-color: rgba(245, 158, 11, 0.5);
}

.btn-shine {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: btn-shine 2s ease-in-out infinite;
}

/* 加载动画 */
.loading-spinner {
  width: 2rem;
  height: 2rem;
  border: 3px solid rgba(59, 130, 246, 0.3);
  border-top: 3px solid #3b82f6;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.loading {
  display: inline-block;
  animation: spin 1s linear infinite;
}

.loading-spinner.loading-sm {
  border: 2px solid transparent;
  border-top: 2px solid currentColor;
  border-radius: 50%;
  width: 1rem;
  height: 1rem;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* 自定义动画 */
@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes scale-in {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes bounce-gentle {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-5px);
  }
  60% {
    transform: translateY(-3px);
  }
}

@keyframes badge-pulse {
  0% {
    box-shadow: 
      0 4px 15px rgba(59, 130, 246, 0.4),
      0 0 30px rgba(59, 130, 246, 0.3);
  }
  100% {
    box-shadow: 
      0 6px 25px rgba(59, 130, 246, 0.6),
      0 0 50px rgba(59, 130, 246, 0.5);
  }
}

@keyframes star-twinkle {
  0%, 100% {
    transform: scale(1);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.2);
    filter: brightness(1.5);
  }
}

@keyframes badge-shine {
  0% {
    left: -100%;
  }
  50% {
    left: 100%;
  }
  100% {
    left: 100%;
  }
}

@keyframes btn-shine {
  0% {
    left: -100%;
  }
  50% {
    left: 100%;
  }
  100% {
    left: 100%;
  }
}

.animate-fade-in-up {
  animation: fade-in-up 0.6s ease-out;
}

.animate-fade-in {
  animation: fade-in 0.4s ease-out;
}

.animate-scale-in {
  animation: scale-in 0.3s ease-out;
}

.animate-bounce-gentle {
  animation: bounce-gentle 2s infinite;
}

.animation-delay-200 {
  animation-delay: 0.2s;
}

.animation-delay-400 {
  animation-delay: 0.4s;
}

/* 玻璃拟态效果 */
.glass-card-dark {
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

/* 复选框样式 */
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
}

input[type="checkbox"]:checked {
  background-color: #3b82f6;
  border-color: #3b82f6;
}

input[type="checkbox"]:checked::before {
  content: "✓";
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  color: white;
  font-size: 0.75rem;
  font-weight: bold;
}
</style> 